{/*插件此一次调用时引用css、js资源文件*/}
{switch $param['type']}
{case baiduMap}
{present name="times['baiduMap']"}
{lt name="times['baiduMap']" value="2"}
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=rkG5tCxVrbXh9qRp92ZI4Yny1zUX8WC4"></script>
{/lt}
{/present}
{/case}
{case qqMap}
{present name="times['qqMap']"}
{lt name="times['qqMap']" value="2"}
<script type="text/javascript" charset="utf-8" src="https://map.qq.com/api/js?v=2.exp"></script>
{/lt}
{/present}
{/case}
{/switch}
{lt name="times['total']" value="2"}
<style>
.layer-container{
	position:relative;
	width:100%;height:100%;
}
	.layer-container .top-bar{
		position:relative;
		z-index:1;opacity:0.8;
		min-height:80px;
		background:#000000;
	}
	.layer-container .top-bar .tips{
		background:#ffffff;
		color:#000000;
		font-size:14px;
		line-height:30px;
		padding:0 15px;
	}
	.layer-container .top-bar .tips b{
		color:#ff0000;
	}
	.layer-container .top-bar .form{
		padding:0 15px;
		display:flex;
		display:-webkit-flex;
		flex-direction:row;
		justify-content:space-between;
		flex-wrap: wrap;
	}
	.layer-container .top-bar .form .item{
		height:32px;;
		margin-top:9px;
		display:flex;
		display:-webkit-flex;
		flex-direction:row;
		justify-content:flex-start;
		flex-wrap: wrap;
	}
	.layer-container .top-bar .form .item:last-child{
		justify-content:flex-end;
	}
	.layer-container .top-bar .form .item input{
		float:left;
		display:block;
		height:32px;width:200px;
	}
	.layer-container .top-bar .form .item a{
		display:block;
		float:left;
		width:80px;height:32px;
		margin-left:10px ;
		border-radius:3px;
		text-align:center;line-height:32px;
		background:#4cdb00;
		color:#ffffff;
	}
	.layer-container .map-container{
		position:absolute;	
		top:0;left:0;;
		width:100%;height:100%;
	}
</style>
{/lt}
<input type="text" class="text input-large" name="{$param['name']}" value="{$param['value']|default=''}"  id="{$param['name']}>" />
<a class="coordinate_{$param["name"]}" href="javascript:;" title="点击获取目标位置坐标"><i class="fa fa-map"></i></a>

<div class="mapBuilderHtml_{$param.name}" style="display:none;">
	<div>
		<div class="layer-container">
			<div class="top-bar">
				<div class="tips">
					<b class="text-danger">双击地图</b>待坐标选定后，点击<b class="text-danger">确定</b>可以<b class="text-danger">完成</b>地理位置坐标拾取。
				</div>
				<div class="form">
					<div class="item">
						<input type="text" name="search_{$param['name']}" placeholder="请输入地址" />
						<a href="javascript:;" class="search_{$param['name']}">
							搜索地址
						</a>   
					</div>
					<div class="item">
						<input class="show_{$param['name']}" type="text" />
						<a href="javascript:;" class="submit_{$param['name']}">
							提交
						</a>   
					</div>
				</div>
			</div>
			<div class="map-container">
			</div>
		</div>
	</div>
</div>
{switch $param['type']}
{case baiduMap}
<script>
var mapContainer_{$param['name']} = '<div id="map_{$param.name}" style="width:100%;height:100%;">' +
'地图加载中，若加载失败请检查配置文件中BAIDU_MAP_KEY是否正确配置'+
'</div>';
var map_{$param['name']},local_{$param['name']};
function mapBuilder_{$param['name']}(){
	// 百度地图API功能
	map_{$param['name']} = new BMap.Map("map_{$param['name']}");            
	map_{$param['name']}.centerAndZoom("三亚",12);           
	map_{$param['name']}.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
	map_{$param['name']}.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
	local_{$param['name']} = new BMap.LocalSearch(
			map_{$param['name']}
			,{renderOptions:{map: map_{$param['name']}}}
			);
	//搜索
	$(document).on('click','.layer-container a.search_{$param["name"]}',function(){
		local_{$param['name']}.search($(this).parent().find('input').val());
	})

	//单击获取点击的经纬度
	map_{$param['name']}.addEventListener("click",function(e){
		map_{$param['name']}.clearOverlays();
		var point = new BMap.Point(e.point.lng, e.point.lat);
		var marker = new BMap.Marker(point);  // 创建标注
		map_{$param['name']}.addOverlay(marker);               // 将标注添加到地图中
		//marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳
		$('.layui-layer .layer-container input.show_{$param["name"]}').val(e.point.lng + "," + e.point.lat);
	});
	/**
	 * 确认
	 */
	$(document).on('click','.layer-container a.submit_{$param['name']}',function(){
		coordinate = $(this).parent().find('input').val();
		if(!coordinate){
			layer.msg('请在目标地图位置点击鼠标');
		}
		else{
			layer.msg('拾取成功,请稍等',function(){
				$("input[name='{$param["name"]}']").val(coordinate);
				layer.closeAll();
			});
		}
	})
}
</script>
{/case}
{case qqMap}
<script>
var mapContainer_{$param['name']} = '<div id="map_{$param.name}" style="width:100%;height:100%;">' +
'地图加载中，若加载失败请检查配置文件中QQ_MAP_KEY是否正确配置'+
'</div>';
var map_{$param['name']},latlngBounds_{$param['name']},markers_{$param['name']} = [];
function mapBuilder_{$param['name']}(){
	// QQ地图API功能
	map_{$param['name']} = new qq.maps.Map(document.getElementById("map_{$param['name']}"),{
		center: new qq.maps.LatLng(18.252710,109.512390),      // 地图的中心地理坐标。
		zoom:11          
	});

	//搜索
	$(document).on('click','.layer-container a.search_{$param["name"]}',function(){
		latlngBounds_{$param['name']} = new qq.maps.LatLngBounds();
		markers = [];
		//调用Poi检索类
		searchService = new qq.maps.SearchService({
			location:'三亚'
			,complete : function(results){
				var pois = results.detail.pois;
				if(typeof(pois) == 'undefined'){
					layer.msg('未搜索到相关地点');
					return false;
				}
				else{
					for(var i = 0,l = pois.length;i < l; i++){
						var poi = pois[i];
						latlngBounds_{$param['name']}.extend(poi.latLng);  
						var marker = new qq.maps.Marker({
							map:map_{$param['name']},
							position: poi.latLng
						});

						marker.setTitle(i+1);

						markers.push(marker);
					}
				}
				map_{$param['name']}.fitBounds(latlngBounds_{$param['name']});
			}
		});
		searchService.search($(this).parent().find('input').val());

	})

	qq.maps.event.addListener(map_{$param['name']}, 'click', function(e) {
		if(markers_{$param['name']}){
			for (i in markers_{$param['name']}) {
				markers_{$param['name']}[i].setMap(null);
			}
		}
		marker=new qq.maps.Marker({
			position:e.latLng, 
			map:map_{$param['name']}
		});
		markers_{$param['name']}.push(marker);
		$(document).find('.layui-layer .layer-container input.show_{$param["name"]}').val(e.latLng.getLat()+ "," + e.latLng.getLng());

    });


	/**
	 * 确认
	 */
	$(document).on('click','.layer-container a.submit_{$param['name']}',function(){
		coordinate = $(this).parent().find('input').val();
		if(!coordinate){
			layer.msg('请在目标地图位置点击鼠标');
		}
		else{
			layer.msg('拾取成功,请稍等',function(){
				$("input[name='{$param["name"]}']").val(coordinate);
				layer.closeAll();
			});
		}
	})
}
</script>
{/case}
{/switch}
<script>
$(function(){
	layui.define(['layer'], function(){})
	$(".coordinate_{$param["name"]}").on("click",function(){
		$html = $($('.mapBuilderHtml_{$param["name"]}').html());
		$html.find('.layer-container .map-container').append(mapContainer_{$param['name']});
		layui.use(['layer'], function(){
			var layer = layui.layer;
			//弹窗
			layer.open({
				type: 1,
				title:'获取地理位置坐标',
				content: $html.html(),
				area: ['88%', '88%'],
				offset:'auto',
				success:function(){
					mapBuilder_{$param['name']}();
				}
			});       
		});  
	})
})
</script>
